<template>
  <div class="app-container">
    <el-row :gutter="10" class="mb8" v-if="!disableEdit">
      <el-col :span="1.5">
        <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd">添加字段</el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-table :data="list">
        <el-table-column label="字段标题" align="center" prop="cnName">
          <template slot-scope="scope">
            {{ scope.row.required == '1' ? `（系统字段）${scope.row.cnName}` : scope.row.cnName }}
          </template>
        </el-table-column>
        <el-table-column label="字段名称" align="center" prop="enName" />
        <el-table-column label="字段类型" align="center" prop="type">
          <template slot-scope="scope">
            <template v-if="scope.row.isDict">
              字典
            </template>
            <template v-else>
              <dict-tag :options="dict.type.event_field_type" :value="scope.row.type" />
            </template>
          </template>
        </el-table-column>
        <el-table-column label="是否必填" align="center" prop="id" />
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" v-if="!disableEdit">
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="handleEdit(scope.row)" v-if="!scope.row.required">编辑</el-button>
            <el-button size="mini" type="text" @click="handleDelete(scope.row)" v-if="!scope.row.required">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <field-edit ref="fieldEdit" @handleOk="handleEditOk" />
  </div>
</template>

<script>
import FieldEdit from "./components/FieldEdit.vue";
import { listModelFields, delModelField, updateFieldsSort } from '@/api/system/eventModel';
import Sortable from "sortablejs";
import { tableListDataSort } from '@/utils/ruoyi';

export default {
  name: 'EventList',
  components: { FieldEdit, Sortable },
  dicts: ["event_field_type"],
  data() {
    return {
      list: [],
      modelId: 0,
      sortData: [],
      sortable: null,
      disableEdit: false
    };
  },
  created() {
    this.modelId = this.$route.query.modelId;
  },
  mounted() {
    this.getList();
  },
  methods: {
    getList() {
      listModelFields(this.modelId).then((res) => {
        console.log(res);
        this.disableEdit = res.data.status == 1;
        if (this.sortable == null) {
          this.list = res.data.sysFields;
          this.sortData = this.list;
          const tbody = document.querySelector(".el-table__body-wrapper tbody");
          this.sortable = Sortable.create(tbody, {
            onSort: (evt) => {
              this.updateFieldsSort(evt.oldIndex, evt.newIndex);
            },
          });
        } else {
          this.sortData = res.data.sysFields;
        }
      });
    },
    updateFieldsSort(oldIndex, newIndex) {
      let newData = tableListDataSort(this.sortData, oldIndex, newIndex);
      let data = [];
      newData.forEach((l, i) => {
        data.push({ fieldId: l.id, sort: i });
      });
      updateFieldsSort(this.modelId, data).then(res => {
        if (res.code == 200) {
          this.$modal.msgSuccess('字段顺序已更新');
          this.getList();
        } else {
          this.$modal.msgError('字段顺序更新失败');
        }
      })
    },
    handleAdd() {
      this.$refs.fieldEdit.add(this.modelId, this.list.length);
    },
    handleEdit(row) {
      this.$refs.fieldEdit.edit(row);
    },
    handleEditOk() {
      this.sortable.destroy();
      this.sortable = null;
      this.getList();
    },
    handleDelete(row) {
      delModelField(row.id).then(res => {
        if (res.code == 200) {
          this.$modal.msgSuccess('字段删除成功');
          this.sortable.destroy();
          this.sortable = null;
          this.getList();
        } else {
          this.$modal.msgError('字段删除失败');
        }
      })
    }
  },
};
</script>

<style scoped lang="scss"></style>
